<template>
  <div>
    <button @click="show = true">显示</button>

    <button @click="color = 'blue'">变颜色blue</button>
    <button @click="color = 'yellow'">变颜色yellow</button>


    <p v-color="color" v-bgColor="bg" v-if="show">这是一个寂寞的天，下着有些猥琐的雨</p>


    <p>app.vue里的p</p>
    
    <son />
  </div>
</template>

<script>
import son from './components/son'
export default {
  components: {
    son
  },
  data() {
    return {
      color: "red",
      show: false,
      bg: 'rgba(233,233,233, .4)'
    };
  },

  // 跟data这些平级
  // 写在哪个组件，就只能在哪个组件里使用
  directives: {

    bgColor: {
      inserted (el, binding) {

        // 原生中说过标识符只能是数字字母下划线且不能以数字开头
        // 所以也就是说标识符里能带 `-` 吗？ 不能！
        // 所以遇到带 `-` 的属性，要去掉 `-` 改成驼峰
        el.style.backgroundColor = binding.value
      },

      update (el, binding) {
         el.style.backgroundColor = binding.value
      }
    }
  },

};
</script>

<style>
</style>